<template>
	<view>
		<view class="top-box">
			<image class="left-img" src="https://t13.baidu.com/it/u=1326581767,2565675948&fm=224&app=112&f=JPEG?w=500&h=500" mode="widthFix"></image>
			<view class="right-cont">
				<view class="cont-title">信息提</view>
				<view class="detail-word">新新信息信息信息信息</view>
				<view class="but-list">
					<view class="space-num common-but">123.88km</view>
					<view class="phone common-but">电话</view>
				</view>
			</view>
		</view>
		<view class="select-title">选择车辆</view>
		<view class="car-list">
			<view class="list-one" v-for="(item, index) in 20" :key="index">
				<view class="top-cont">
					<view class="car-num">YTR12345</view>
					<view class="right-word">
						<view class="middle-cont">
							<view class="per-num">
								电量：
								<em class="add-bold">23%</em>
							</view>
							<view class="space-num">
								可骑行约：
								<em class="add-bold">112.km</em>
							</view>
						</view>
						<view class="pay-but">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
page {
	padding: 20rpx;
	box-sizing: border-box;
}
.top-box {
	border-radius: 10rpx;
	background-color: #bfeefe;
	border: 1rpx solid #ccc;
	padding: 20rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 123, 255, 0.5);
	transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
	display: flex;
	.left-img {
		width: 150rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
	}
	.right-cont {
		width: calc(100% - 150rpx);
		padding-left: 20rpx;
		box-sizing: border-box;
		.cont-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
		.but-list {
			display: flex;
			margin-top: 10rpx;
			.common-but {
				padding: 8rpx 15rpx;
				border-radius: 15rpx;
				border: 1rpx solid #bbb;
			}
			.space-num {
				margin-right: 20rpx;
			}
		}
	}
}
.select-title {
	margin-top: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #000;
}
.car-list {
	height: calc(100vh - 350rpx);
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 10rpx;
	overflow-y: scroll;

	.list-one {
		background-color: #bfeefe;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.top-cont {
			display: flex;
			align-items: center;
			.car-num {
				background-color: yellow;
				color: #000;
				font-weight: bold;
				border: 6rpx solid #fff;
				width: 200rpx;
				height: 60rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.right-word {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.middle-cont {
					margin-left: 20rpx;
				}
				.pay-but {
					width: 130rpx;
					height: 70rpx;
					background-color: #12a6dc;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				.add-bold {
					font-weight: bold;
					color: green;
				}
			}
		}
	}
}
</style>
